<template>
    <div v-loading="loading">
        <el-dialog :title="type == 'create' ? '添加菜单' : '修改菜单'" :visible.sync="visible" width="800px">
            <el-form :model="form" label-width="80px" ref="form">
                <!-- 选择菜单还是按钮 -->
                <el-form-item label="类型">
                    <el-select placeholder="选择类型" style="width: 500px;" v-model="form.type">
                        <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in typeList"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 上级菜单 -->
                <el-form-item label="上级菜单">
                    <!-- <SelectTree :options="options"></SelectTree> -->
                    <tree-select :options="tableData" :props="{ value: 'id', label: 'name', children: 'childrens' }" v-model="form.pid" width="500px"></tree-select>
                </el-form-item>

                <el-form-item label="菜单名称">
                    <el-input placeholder="请输入菜单名称" style="width: 500px" v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="权限标识" v-if="form.type == 'button'">
                    <el-input placeholder="请输入权限标识" style="width: 500px" v-model="form.mask"></el-input>
                </el-form-item>

                <el-form-item label="菜单图标" v-if="form.type == 'menu'">
                    <SelectIcon v-model="form.icon"></SelectIcon>
                </el-form-item>

                <el-form-item label="路由名称" v-if="form.type == 'menu'">
                    <el-input placeholder="请输入路由名称" style="width: 500px" v-model="form.path_name"></el-input>
                </el-form-item>

                <el-form-item label="路由" v-if="form.type == 'menu'">
                    <el-input placeholder="请输入路由" style="width: 500px" v-model="form.path"></el-input>
                </el-form-item>

                <el-form-item label="组件路径" v-if="form.type == 'menu'">
                    <el-input placeholder="请输入路由" style="width: 500px" v-model="form.component"></el-input>
                </el-form-item>

                <el-form-item label="排序" v-if="form.type == 'menu'">
                    <el-input placeholder="请输入排序号" style="width: 500px" v-model="form.sort"></el-input>
                </el-form-item>

                <!-- <el-form-item label="上级ID">
                <el-input placeholder="选择上级ID" style="width:500px" v-model="form.pid"></el-input>
                </el-form-item>-->

                <!-- 是否显示在菜单列表 1显示 0隐藏 -->
                <el-form-item label="是否显示" v-if="form.type == 'menu'">
                    <el-switch @change="showFun" active-color="#13ce66" inactive-color="#ff4949" v-model="show"></el-switch>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-button @click="toForm()" size="small" style="width: 100px" type="success">添加</el-button>
        <el-button @click="getAdministratorsMenu()" icon="el-icon-refresh-right" size="small" style="width: 100px" type="primary">刷新</el-button>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="tableData" :tree-props="{ children: 'childrens' }" max-height="600px" row-key="id" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>

                <el-table-column label="排序" prop="sort"></el-table-column>

                <el-table-column label="菜单名称" prop="name"></el-table-column>

                <el-table-column label="图标" prop="icon">
                    <template slot-scope="scope" v-if="scope.row.icon">
                        <iconfont :icon="scope.row.icon" size="26"></iconfont>
                    </template>
                </el-table-column>

                <el-table-column label="权限标识" prop="mask"></el-table-column>

                <el-table-column label="路由" prop="path"></el-table-column>

                <!-- <el-table-column label="分类">
                      <template slot-scope="scope">
                          <span v-if="scope.row.cate">{{scope.row.cate.name}}</span>
                          <span v-else>-</span>
                      </template>
                </el-table-column>-->
                <el-table-column label="路由名称" prop="path_name"></el-table-column>

                <el-table-column label="组件路径" prop="component"></el-table-column>
                <el-table-column label="上级ID" prop="pid"></el-table-column>

                <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                        <div>{{ scope.row.type == 'menu' ? '菜单' : '按钮' }}</div>
                    </template>
                </el-table-column>

                <el-table-column label=" 状态" prop="show">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.show == 1 ? 'success' : 'info'">
                            {{ scope.row.show == 1 ? '显示' :
                            '隐藏' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="添加时间" prop="created_at"></el-table-column> -->
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="addForm(scope.row.id)" size="mini" style="padding: 10px" type="primary">添加</el-button>
                        <el-button @click="toForm(scope.row)" size="mini" style="padding: 10px" type="primary">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" style="padding: 10px" type="danger">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
  
<script>
import SelectIcon from '@/components/SelectIcon/index'
import treeSelect from '@/components/SelectTree/index'
export default {
    name:"admin-menu-list",
    components: {
        treeSelect,
        SelectIcon,
    },
    data() {
        return {
          submitComplete:false,
            query: {
                username: '',
                nickname: '',
                login_ip: '',
                role_id: '',
                avatar: '',
                disable: 1,
            },
            form: {
                name: '',
                pid: null, //上级id
                path_name: '', //路由名称
                path: '', //路由
                type: '', //menu菜单button按钮
                show: 1, //是否显示，1显示，0隐藏
                icon: '',
                mask: null, //用户输入
                component: '',
                sort: '', //排序
            },
            loading: false,
            typeList: [
                {
                    name: '菜单',
                    value: 'menu',
                },
                {
                    name: '按钮',
                    value: 'button',
                },
            ],
            disable: true,
            tableData: [],
            visible: false,
            worksId: '',
            type: 'create',
            show: true,
            id: '',
        }
    },
    mounted() {
        this.getAdministratorsMenu()
    },
    methods: {
        updateDisabled(array, pid) {
            let that = this
            // 遍历数组中的每个节点
            array.forEach((node) => {
                // 把 disabled 字段追加到节点中，并设置初始值为 false
                if (node.pid === pid) {
                    node.disabled = true // 如果等于，则将 disabled 的值设置为 true
                }
                // 如果当前节点有 childrens，并且 childrens 是一个数组
                if (Array.isArray(node.childrens) && node.childrens.length > 0) {
                    // 递归调用 updateDisabled 函数处理 childrens 数组
                    that.updateDisabled(node.childrens, pid)
                }
            })
        },

        //添加子集
        addForm(id) {
            this.form = {
                pid: id, //上级id
                show: 1, //是否显示，1显示，0隐藏
            }
            this.$nextTick(() => {
                this.visible = true
            })
        },
        showFun(res) {
            this.form.show = res ? 1 : 0
            this.show = res
        },

        disableFun(res) {
            this.query.disable = res == true ? 1 : 0
        },
        getAdministratorsMenu() {
            this.loading = true
            this.$request.get('/admin-menu/index').then((res) => {
                this.tableData = res
                this.loading = false
            })
        },

        del(id) {
            this.$request.del('/admin-menu/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.getAdministratorsMenu()
            })
        },

        toForm(form = null) {
            if (form != null) {
                this.type = 'update'
                // this.form = form
                if (form.pid == 0 || form.pid == '') {
                    this.form.pid = null
                } else {
                    this.form.pid = form.pid
                }
                this.id = form.id
                this.form = form
                this.$nextTick(() => {
                    this.visible = true //打开弹出框
                })
                delete this.form.childrens

                if (form.pid) this.updateDisabled(this.tableData, form.pid)
            } else {
                this.type = 'create'
                this.form = {
                    show: 1, //是否显示，1显示，0隐藏
                }
                this.visible = true //打开弹出框
            }
        },
        closeBox() {
            this.visible = false
            this.type = 'create'
            this.form = {
                show: 1, //是否显示，1显示，0隐藏
            }
        },
        init_form() {
            this.form = {
                name: '',
                pid: null, //上级id
                path_name: '', //路由名称
                path: '', //路由
                type: '', //menu菜单button按钮
                show: 1, //是否显示，1显示，0隐藏
                icon: '',
                mask: null, //用户输入
                component: '',
                sort: '', //排序
            }
        },
        //提交
        submit() {
            if(this.submitComplete) return
            this.submitComplete = true
            console.log(this.form, this.type)
            if (!(this.form.name && this.form.type)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning',
                })
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request.post('/admin-menu/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })
                    this.submitComplete = false
                    this.init_form()
                    this.getAdministratorsMenu()
                    this.closeBox()
                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put('/admin-menu/update/' + this.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.submitComplete = false
                    this.init_form()
                    this.getAdministratorsMenu()
                    this.closeBox()
                }).catch((error) => {
                    this.submitComplete = false
                });
            }
        },
    },
}
</script>
  
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>